<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { insertReport } from "@/apis/report";
import { uploadImg, uploadReportImg } from "@/apis/upload";
import { complaintOptions } from "@/apis/options";
import { userInfoStore } from "@/stores/user.js";
const router = useRouter();
const route = useRoute();
const targetId = route.params.id;
const reporterId = ref();
const reportImage = ref();
const userStore = userInfoStore();
onMounted(() => {
  //console.log("用户信息--",userStore.userInfo?.userId);
  reporterId.value = userStore.userInfo?.userId;
  console.log("用户信息--", reporterId.value);
});
// 举报表单数据
const reportFormRef = ref();
const reportForm = reactive({
  // reporterId: reporterId.value,
  // targetId:targetId,
  reportType: "",
  content: "",
  images: "",
});

// 表单验证规则
const rules = reactive({
  reportType: [{ required: true, message: "请选择举报类型", trigger: "change" }],
  content: [{ required: true, message: "请详细描述举报内容", trigger: "blur" }],
});

// 图片上传相关
const handlePreview = (file) => {
  console.log("Preview:", file);
};

// 上传图片相关
const uploadImage = async (options) => {
  const { file } = options;
  const formData = new FormData();
  formData.append("file", file);

  try {
    const res = await uploadImg(formData);
    if (res.code === 200) {
      reportImage.value = res.message;
      options.onSuccess(res.message);
    } else {
      options.onError(new Error("上传失败"));
    }
  } catch (error) {
    options.onError(new Error("上传出错"));
    console.error(error);
  }
};

const handleRemove = (file, fileList) => {
  console.log("Remove:", file, fileList);
  reportForm.images = fileList;
};

const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定要删除 ${file.name} 吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
};

const handleSuccess = (response, file, fileList) => {
  console.log("Upload success:", response, file, fileList);
  reportForm.images = fileList;
};

// 提交举报
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let tjForm = {
        reporterId: reporterId.value,
        targetId: targetId,
        reportType: reportForm.reportType,
        content: reportForm.content,
        images: reportImage.value,
      };
      console.log("举报提交信息---", tjForm);
      const res = insertReport(tjForm);
      console.log("举报提交res---", res);
      ElMessage.success("举报提交成功");
      route.push({ name: "ChatList" });
    } else {
      ElMessage.error("请填写完整信息");
      return false;
    }
  });
};

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 返回上一页
const goBack = () => {
  router.back();
};
</script>
<template>
  <div class="box">
    <div class="report-container">
      <!-- 顶部导航栏 -->
      <div class="report-header">
        <el-button type="text" icon="el-icon-back" @click="goBack">返回</el-button>
        <h2>商品举报</h2>
      </div>

      <!-- 举报表单 -->
      <div class="report-form">
        <el-form
          ref="reportFormRef"
          :model="reportForm"
          :rules="rules"
          label-width="120px"
          size="medium"
        >
          <!-- <el-form-item label="商品名称" prop="productName">
            <el-input
              v-model="reportForm.productName"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item> -->

          <el-form-item label="举报类型" prop="reportType">
            <el-select v-model="reportForm.reportType" placeholder="请选择举报类型">
              <el-option
                v-for="item in complaintOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="详细描述" prop="content">
            <el-input
              v-model="reportForm.content"
              type="textarea"
              :rows="4"
              placeholder="请详细描述举报内容"
            ></el-input>
          </el-form-item>

          <el-form-item label="上传图片" prop="images">
            <el-upload
              class="upload-demo"
              action=""
              :http-request="uploadImage"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
              :limit="1"
              list-type="picture"
              :file-list="reportForm.images"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，最多上传1张
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(reportFormRef)"
              >提交举报</el-button
            >
            <el-button @click="resetForm(reportFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.report-container {
  width: 800px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.report-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.report-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  margin-left: 10px;
}

.report-form {
  flex: 1;
  padding: 20px 15px;
  background-color: #fff;
  overflow-y: auto;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-upload-list) {
  width: 100%;
}

.el-button {
  margin-right: 15px;
}
</style>
